<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted, reactive } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { ElMessage } from 'element-plus'
import { bus } from '@/utils/common/mitt'

const props = defineProps({
  dataEditor: {
    type: Object,
    default: () => ({}) // 使用函数返回默认值
  },
  editorOpt: {
    type: Array,
    default: () => [] // 使用函数返回默认值
  }
})

// 使用 reactive 确保响应性
let data = reactive(Object.assign({}, props.dataEditor))

const editorRef = shallowRef()

const toolbarConfig = { placeholder: '请输入内容...' }
const editorConfig = { placeholder: '请输入内容...' }

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

const emit = defineEmits(['handleEditor'])

function handleEditor(type) {
  switch (type) {
    case 'cancel':
      emit('handleEditor', type, data)
      Object.keys(data).forEach((key) => {
        data[key] = '' // 清空数据
      })
      editorRef.value.clear()
      break
    case 'submit':
      editorSubmit(type)
      editorRef.value.clear()
      break
    default:
      break
  }
}

function getText(str) {
  if (str == undefined) {
    return true
  } else {
    let text = str.replace(/<[^<>]+>/g, '').replace(/&nbsp;/gi, '')
    if (text === '') return true
    let regu = '^[ ]*$' // 修正正则表达式
    let re = new RegExp(regu)
    return re.test(text)
  }
}

function editorSubmit(type) {
  let result = 0
  for (const item of props.editorOpt) {
    if (getText(data[item.prop])) {
      ElMessage.error(`${item.desc}为必填项`) // 修正模板字符串
      result = 1
      break // 发现错误后立即退出循环
    }
  }

  if (result === 0) {
    emit('handleEditor', type, data)
    Object.keys(data).forEach((key) => {
      data[key] = '' // 清空数据
    })
  }
}

onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor) {
    editor.destroy() // 确保销毁编辑器
  }
})
function clearEditor() {
  data = {}
  editorRef.value.destroy()
}
defineExpose({ clearEditor })
</script>

<template>
  <div class="container">
    <div class="header">实习周记</div>
    <div class="editor-content">
      <template v-for="item in props.editorOpt" :key="item.prop">
        <div class="editor-section">
          <div class="title">{{ item.desc }}：</div>
          <div class="editor-wrapper">
            <Toolbar class="toolbar" :editor="editorRef" :defaultConfig="toolbarConfig" />
            <Editor
              class="editor"
              v-model="data[item.prop]"
              :defaultConfig="editorConfig"
              @onCreated="handleCreated"
            />
          </div>
        </div>
      </template>
    </div>
    <div class="footer">
      <el-button type="info" class="btn" @click="handleEditor('cancel')">关闭</el-button>
      <el-button type="success" class="btn" @click="handleEditor('submit')">提交</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: 60vh;
  background-color: #f5f7fa;
  padding: 2rem;
  box-sizing: border-box;

  .header {
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: #303133;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.5rem;
  }

  .editor-content {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 2rem;

    .editor-section {
      margin-bottom: 2rem;

      &:last-child {
        margin-bottom: 0;
      }

      .title {
        text-align: left;
        font-size: 1.2rem;
        font-weight: 600;
        color: #606266;
        margin-bottom: 1rem;
        padding: 0.5rem 0;
        border-bottom: 2px solid #ebeef5;
      }

      .editor-wrapper {
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        overflow: hidden;
text-align: left;
        .toolbar {
          border-bottom: 1px solid #dcdfe6;
          background: #f5f7fa;
        }

        .editor {
          height: 250px;
          background: #fff;
        }
      }
    }
  }

  .footer {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;

    .btn {
      padding: 0.8rem 2rem;
      font-size: 1rem;
      border-radius: 4px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style>
